<template>
  <view
    class="bg-white rounded-[28rpx] p-[32rpx] shadow-lg relative flex flex-col hover:shadow-xl transition-all duration-300 hover-card"
  >
  
    <!-- 任务状态标签 -->
    <view class="absolute top-[1rpx] right-[1rpx] bg-[#03a9f4] text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-[6rpx]">
      {{ change(item) }}
    </view>

    <!-- 发布人信息 -->
    <view class="flex items-center mb-[16rpx]">
      
      <view class="text-[24rpx] text-[#4caf50] font-medium">
        {{ item.title }} （{{ item.number }}人）
      </view>
    </view>
    <view class="text-[22rpx] text-[#666] mb-[4rpx] line-clamp-2">签到地址：{{ item.full_address }}</view>

    <!-- 任务状态信息 -->
    <view class="flex justify-between text-[22rpx] text-[#666] mb-[16rpx]">
      <view>
        <view>签到日期：{{ item.start_date }} 至 {{ item.end_date }}</view>
        <view>签到时间段：{{ item.check_time }} 至 {{ item.deadline }}</view>
      </view>
      <view class="text-right">
        <view class="text-[28rpx] font-bold text-[#FF4D4F] mb-[4rpx]">¥{{ item.single_amount || '0' }}</view>
        <view class="text-[20rpx] text-[#666]">任务金额</view>
      </view>
    </view>

    <!-- 标签 -->
    <view class="flex flex-wrap gap-x-[10rpx] gap-y-[10rpx] mb-[16rpx]">
      <view
        v-for="(tag, tIndex) in item.tags || []"
        :key="tIndex"
        class="text-[20rpx] px-[16rpx] py-[6rpx] bg-[#e3f2fd] rounded-[10rpx] text-[#2196F3] font-medium"
      >
        {{ tag }}
      </view>
    </view>

    <!-- 底部操作 -->
    <view
      class="flex items-center justify-end mt-[10rpx] pt-[16rpx] border-t border-[#f5f7fa] gap-[12rpx] flex-wrap"
    >
      <!-- 动态操作按钮 -->
      <template v-for="action in getActionList()" :key="action">
        <nut-button 
          size="small" 
          :type="getButtonType(action)" 
          @click.stop="handleAction(action)" 
        >
          {{ action }}
        </nut-button>
      </template>
      <nut-button
        size="small"
        type="warning"
        @click.stop="handleEdit"
        v-if="item.status != '5'"
      >
        编辑
      </nut-button>
      <nut-button
        size="small"
        type="danger"
        @click.stop="handleEndSign"
        v-if="item.status != '5' && item.abort == 0"
      >
        取消任务
      </nut-button>
      <nut-button
        size="small"
        type="danger"
        disabled
        @click.stop
        class="bg-[#f44336] border-none"
        v-else
      >
        已取消
      </nut-button>
    </view>

    <!-- 支付方式选择弹窗 -->
    <PaymentMethodModal 
      v-model="showPaymentModal" 
      :amount="parseFloat(props.item.task_amount || '0')"
      @confirm="handlePaymentConfirm"
      @cancel="handlePaymentCancel"
    />
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue'
import Taro from '@tarojs/taro'
import { post } from '@/utils/request'
import PaymentMethodModal from '@/components/PaymentMethodModal.vue'
import { useUserStore } from '@/store/user'

// 定义接口
interface SignData {
  date: string
  count: number
}

interface TaskItem {
  id: number
  title: string
  desc: string
  full_address: string
  taskName: string
  taskType: string
  publisherName?: string
  publisherAvatar?: string
  participantCount: number
  totalSignCount: number
  averageRate: number
  recentSigns: SignData[]
  publishTime?: string
  deadline?: string
  totalAmount?: string
  tags?: string[]
  hasAttachment?: boolean
  status?: string
  pay_status?: number // 支付状态：0-未支付，1-已支付
  abort?: number // 是否取消：0-未取消，1-已取消
  single_amount?: string // 单个任务金额
  task_amount?: string // 任务总金额
  number?: number // 人数
  start_date?: string // 开始日期
  end_date?: string // 结束日期
  check_time?: string // 签到时间
}

// 定义props
const props = defineProps<{
  item: TaskItem
}>()

// 定义emits
const emit = defineEmits<{
  viewSignList: [item: TaskItem]
  exportData: [item: TaskItem]
  endSign: [item: TaskItem]
  delete: [item: TaskItem]
  viewDetails: [item: TaskItem]
  refresh: [item: TaskItem]
  detail: [item: TaskItem]
}>()


/**
 * 状态转换方法
 * @description 根据任务的不同状态字段显示相应的状态文本
 * @param {Object} item - 任务对象
 * @returns {string} 状态文本
 */
 const change = (item) => {
  console.log("item为", item);

  // 根据 item.releaseStatus 显示发布状态，任务类：1 待支付 2 审核中 3 审核通过 4 审核不过 5 已结束
  if (item.releaseStatus) {
    switch (item.releaseStatus) {
      case 1:
        return "待支付";
      case 2:
        return "审核中";
      case 3:
        return "审核通过";
      case 4:
        return "审核不过";
      case 5:
        return "已结束";
      default:
        break;
    }
  }

  // 检查任务是否已取消
  if(item.status == 5){
    return "已取消";
  }
  
  // 检查支付状态
  if(item.pay_status == 0){
    return "未支付";
  }
  
  // 根据任务状态返回对应文本
  switch (item.status) {
    case 1:
      return "招聘中";
    case 2:
      return "停止招聘";
    case 5:
      return "已取消";
    case 4:
      return "已完成";
    case 21:
      return "待审核";
    case 22:
      return "确认完成";
    case 23:
      return "有纠纷";
    case 24:
      return "纠纷协商";
    default:
      return "已发布";
  }
};


// 用户store
const userStore = useUserStore();

// 支付方式选择弹窗相关
const showPaymentModal = ref(false);

// 获取操作按钮列表方法
const getActionList = () => {
  if (!props.item.pay_status) {
    if (props.item.abort == 0) {
      return ["支付费用"];
    }
    return ["支付费用"];
  }
  return ["查看申请者"];
};

const handleEdit = () => {
  emit('detail', props.item);
}
/**
 * 获取按钮类型
 * @param {string} action - 操作名称
 * @returns {string} 按钮类型
 */
const getButtonType = (action: string) => {
  switch (action) {
    case "支付费用":
      return "warning";
    // case "取消任务":
    //   return "default";
    case "查看申请者":
      return "info";
    case "取消任务":
      return "danger";
    default:
      return "default";
  }
};

/**
 * 处理操作按钮点击
 * @param {string} action - 操作名称
 */
const handleAction = (action: string) => {
  console.log("执行操作:", action, props.item);

  // 根据操作名称触发对应事件
  switch (action) {
    case "支付费用":
      showPaymentModal.value = true;
      break;
    // case "取消任务":
    //   handleDelete();
      break;
    case "查看申请者":
      handleViewSignList();
      break;
    case "取消任务":
      handleEndSign();
      break;
    default:
      console.warn("未知操作:", action);
  }
};

/**
 * 取消签到任务（保留用于后续扩展）
 * @description 参考 FactoryRecruitmentItem 的删除逻辑
 */
// const handleDelete = () => {
//   Taro.showModal({
//     title: '确认取消任务',
//     content: '确定要取消这个签到任务吗？取消后将无法恢复，已支付的费用将按规则退还。',
//     confirmText: '确认取消',
//     cancelText: '再想想',
//     confirmColor: '#ff4d4f',
//     success: (res) => {
//       if (res.confirm) {
//         // 调用取消任务的API
//         cancelTask();
//       }
//     }
//   });
// };

/**
 * 调用取消任务API（保留用于后续扩展）
 * @description 实际调用后端接口取消任务
 */
// const cancelTask = async () => {
//   try {
//     Taro.showLoading({
//       title: '正在取消任务...',
//       mask: true
//     });

//     // 调用取消签到任务的API
//     const response = await post('/task/cancelCheckinTask', {
//       taskId: props.item.id
//     });

//     if (response.code === 0) {
//       // 成功取消任务
//       emit('delete', props.item);
//       Taro.showToast({
//         title: '任务已取消',
//         icon: 'success',
//         duration: 2000
//       });
      
//       // 延迟刷新页面数据
//       setTimeout(() => {
//         emit('refresh', props.item);
//       }, 1500);
//     } else {
//       // 取消任务失败
//       Taro.showToast({
//         title: response.message || '取消任务失败',
//         icon: 'error',
//         duration: 2000
//       });
//     }
//   } catch (error) {
//     console.error('取消签到任务失败:', error);
//     Taro.showToast({
//       title: '网络错误，请重试',
//       icon: 'error',
//       duration: 2000
//     });
//   } finally {
//     Taro.hideLoading();
//   }
// };

/**
 * 取消任务任务
 * @description 参考 FactoryRecruitmentItem 的结束招聘逻辑
 */
const handleEndSign = () => {
  Taro.showModal({
    title: '确认取消任务任务',
    content: '确定要结束这个签到任务吗？结束后将无法恢复，请谨慎操作。',
    confirmText: '确认结束',
    cancelText: '取消',
    confirmColor: '#ff4d4f',
    success: (res) => {
      if (res.confirm) {
        // 调用取消任务任务的API
        endSignTask();
      }
    }
  });
};

/**
 * 调用取消任务任务API
 * @description 实际调用后端接口结束任务
 */
const endSignTask = async () => {
  try {
    Taro.showLoading({
      title: '正在结束任务...',
      mask: true
    });

    // 调用取消任务任务的API
    const response = await post('/check/updateStatus', {
      id: props.item.id,
      status: 5
    });

    console.log("response", response);
    console.log("response.code:", response.code);
    console.log("response.code == 0:", response.code == 0);

    if (response.code == 0) {
      console.log("执行成功分支");
      Taro.showToast({
        title: '签到任务已结束',
        icon: 'success',
        duration: 2000
      });
      
      // 延迟刷新页面数据
      setTimeout(() => {
        emit('refresh', props.item);
      }, 1500);
    } else {
      console.log("执行失败分支");
      console.log("显示错误信息:", response.data);
      // 结束任务失败
      const errorMessage = response.data || response.message || '操作失败';
      console.log("准备显示Toast:", errorMessage);
      
      // 先隐藏 Loading，再显示错误信息
      Taro.hideLoading();
      
      // 延迟显示错误信息，确保 Loading 完全隐藏
      setTimeout(() => {
        console.log("开始显示Toast");
        Taro.showToast({
          title: errorMessage,
          icon: 'error',
          duration: 3000,
          mask: true
        });
        console.log("Toast调用完成");
      }, 200);
      // emit('refresh', props.item);
    }
  } catch (error) {
    console.error('取消任务任务失败:', error);
    Taro.hideLoading();
    Taro.showToast({
      title: '网络错误，请重试',
      icon: 'error',
      duration: 2000
    });
  }
};

// 查看申请者
const handleViewSignList = () => {
  emit('viewSignList', props.item)
  Taro.navigateTo({
    url: `/pages/post/applicants?taskId=${props.item.id}&type=checkin`,
  });
}

/**
 * 微信支付处理
 * @param {Object} param - 支付参数
 */
const doPay = (param: any) => {
  (window as any).WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: param.appid, //公众号ID，由商户传入
      timeStamp: param.timeStamp, //时间戳，自1970年以来的秒数
      nonceStr: param.nonceStr, //随机串
      package: param.prepayId,
      signType: "RSA", //微信签名方式：
      paySign: param.paySign, //微信签名
    },
    function (param: any) {
      if (param.err_msg === "get_brand_wcpay_request:ok") {
        // 使用以上方式判断前端返回,微信团队郑重提示：
        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
        Taro.showToast({
          title: "支付成功！",
          icon: "success",
          duration: 2000,
        });
      } else {
        Taro.showToast({ title: "支付失败！", icon: "error", duration: 2000 });
      }
      // 支付后刷新页面（2秒后执行，等待提示消失）
      setTimeout(() => {
        // H5环境，也可以用window.location.reload()
        if (process.env.TARO_ENV === "h5") {
          // window.location.reload();
          emit('refresh', props.item);
        }
      }, 2000);
    }
  );
};

/**
 * 处理支付方式确认
 * @param method 支付方式
 */
const handlePaymentConfirm = async (method: 'balance' | 'wechat') => {
  try {
    // 调用支付接口
    const payRes = await post("/pay/taskCheck", {
      amount: props.item.task_amount,
      bid: props.item.id,
      vipType: 1,
      deductionBalance: method === 'balance' ? 1 : 0, // 余额支付传1，微信支付传0
    });

    if (payRes.code == 0) {
      if (method === 'wechat') {
        // 微信支付
        doPay(payRes.data);
      } else {
        // 余额支付
        if (payRes.data.code == 2) {
          // 余额支付成功
          Taro.showToast({
            title: "支付成功！",
            icon: "success",
            duration: 2000,
          });
          // 更新用户余额
          const newBalance = (userStore.userInfo.balance || 0) - parseFloat(props.item.task_amount || '0');
          userStore.updateBalance(newBalance);
          // 刷新页面数据
          setTimeout(() => {
            emit('refresh', props.item);
          }, 1200);
        } else {
          // 余额支付失败
          Taro.showToast({
            title: payRes.data.msg || "支付失败",
            icon: "error",
            duration: 2000,
          });
        }
      }
    } else {
      Taro.showToast({
        title: payRes.message || "支付失败",
        icon: "error",
        duration: 2000,
      });
    }
  } catch (error) {
    console.error("支付失败:", error);
    Taro.showToast({
      title: "网络错误，请重试",
      icon: "error",
      duration: 2000,
    });
  }
};

/**
 * 处理支付取消
 */
const handlePaymentCancel = () => {
  Taro.showToast({
    title: "已取消支付",
    icon: "none",
  });
};

/**
 * 支付签到任务费用（保留原函数用于兼容，已废弃）
 */
// const handlePay = async () => {
//   try {
//     const payRes = await post("/pay/taskCheck", {
//       amount: props.item.task_amount,
//       bid: props.item.id,
//       vipType: 1,
//     });
//     if (payRes.code == 0) {
//       doPay(payRes.data);
//     } else {
//       Taro.showToast({
//         title: payRes.message || "支付失败",
//         icon: "error",
//         duration: 2000,
//       });
//     }
//   } catch (error) {
//     console.error("支付失败:", error);
//     Taro.showToast({
//       title: "网络错误，请重试",
//       icon: "error",
//       duration: 2000,
//     });
//   }
// };
</script>

<style lang="scss" scoped>
</style>